<template>
    <div>
        <div class="reward_hd">
            <div>
                <img src="../../images/reward_hd_01.jpg" />
            </div>
            <p>
                <i class="icon iconfont icon-nansheng-"></i>
                <span>员工号：{{clerkInfo.tlrNo}}</span>
            </p>
        </div>
        <div class="reward_menu">
            <h2>打赏芸券选择</h2>
            <div class="reward_change clearfix">
                <div @click="rewardTab(0)" class="left reward_item" :class="{item_cur:tabIndex == 0}">3芸券</div>
                <div @click="rewardTab(1)" class="left reward_item" :class="{item_cur:tabIndex == 1}">6芸券</div>
                <div @click="rewardTab(2)" class="left reward_item" :class="{item_cur:tabIndex == 2}">9芸券</div>
            </div>
            <div @click="rewardTab(3)" class="reward_input clearfix">
                <span class="left">打赏芸券：</span>
                <input class="left" type="text" v-model="rewardInput" placeholder="请输入您想打赏的芸券值" />
            </div>
        </div>
        <div @click="rewardBtn" class="reward_btn">打赏</div>
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import getData from '../../service/getData.js'
    import getData2 from '../../service/getData2.js'
    import { mapState } from 'vuex'
    import { Toast } from 'mint-ui'
    import {Storage} from 'src/utils/storage.js'

    export default {
        data(){
            return{
                loading:true,
                noMoreCoupon:true,
                tabIndex:null,
                rewardInput:'',
                rewardAmount:'',
                clerkInfo:{
                  "clerkId": '',
                  "mchtId": '',
                  "tlrNo": ''
                }
            }
        },
        created:function(){
        },
        computed:{
            ...mapState({
                userInfo:state => state.user.userInfo
            })
        },
        methods:{
            // 芸券选择
            rewardTab:function(num){
                var me =this;
                me.tabIndex=num;
                if (num==0) {
                    me.rewardAmount=3;
                    me.rewardInput=''
                }else if(num==1){
                    me.rewardAmount=6;
                    me.rewardInput=''
                }else if(num==2){
                    me.rewardAmount=9;
                    me.rewardInput=''
                }
            },
            //打赏
            rewardBtn:function(){
                var me =this;
                var reg = /^[0-9]*$/;
                if(me.tabIndex==3){
                    me.rewardAmount=me.rewardInput;
                }
                if(!reg.test(me.rewardAmount)){
                    Toast({
                        message: '只能输入整数',
                        duration: 1000
                    });
                    return;
                }
                if (me.rewardAmount<=0) {
                    Toast({
                        message: '不能小于0',
                        duration: 1000
                    });
                    return
                }
                if (me.rewardAmount>50) {
                    Toast({
                        message: '不能大于50',
                        duration: 1000
                    });
                    return
                }
                getData2.rewardUser({method:'post',data:{"clerkId":me.$route.query.clerkId,"mchtId":me.$route.query.mchtId,"tlrNo":me.$route.query.tlrNo,"rewardId":me.userInfo.usrId, "yunCur":me.rewardAmount}}).then(rep=>{
                    if(rep.respCode=='00'){
                        Toast({
                            message: '打赏成功',
                            duration: 1000
                        });
                        Storage.set("reward_info",rep.content.list,true);
                        console.log(rep.content.list);
                        // this.$router.push({name:'rewardSuccess',query:{couponInfo:rep.content.list}});
                        me.$router.push({name:'rewardSuccess'});
                    }else{
                        Toast({
                            message: rep.errorInfo,
                            duration: 1000
                        });
                    }

                })

                // this.$router.push({path:'/rewardSuccess'})
                // console.log(me.rewardInput);
                // console.log(me.rewardAmount);

            }
        }
    }
</script>
<style scoped>
    .reward_hd{
        background-color: #fff;
        text-align: center;
        padding: 2.1875rem 0 0;
        border-bottom: 1px solid #f2f2f2;
    }
    .reward_hd div{
        width:6.5625rem;
        height: 6.5625rem;
        overflow: hidden;
        margin:0 auto;
        border: 1px solid #cfcfcf;
    }
    .reward_hd div img{width: 100%}
    .reward_hd p .icon-nansheng-{
        color:#1a9dff;
        font-size: 1.4rem;
        line-height: 2;
    }
    .reward_hd p span{
        display: block;
        color:#333;
        font-size: 1.2rem;
        font-weight: bold;
        padding: 0.3rem 0 1.875rem;
    }
    .reward_menu{
        margin-top: 1rem;
        background-color: #fff;
        color:#333;
        position: relative;
        z-index: 9;
    }
    .reward_menu h2{
       font-size: 1.2rem;
       line-height: 3.3rem;
       padding: 0 0.667rem;
    }
    .reward_change{
        padding: 0.3rem 0 1.3125rem 0.667rem;
        border-bottom:1px solid #eeeeee;
    }
    .reward_item{
        margin: 0 0.7rem 0 0.1rem;
        border:1px solid #ccc;
        border-radius: 0.6rem;
        font-size: 1rem;
        width: 29%;
        text-align: center;
        line-height: 2.2rem;
        color:#333;
        background-color: #f6f6f6;
    }
    .item_cur{
        background-color: #fce6ef;
        border:1px solid #ed5a92;
    }
    .reward_input{
        font-size: 1rem;
        color: #333;
        padding:0 0.667rem;
        border-bottom:1px solid #eeeeee;
        overflow: hidden;
    }
    .reward_input span{
        height: 2.75rem;
        line-height:2.75rem;
    }
    .reward_input input{
        width: 60%;
        height: 2.65rem;
        /*padding: 0.6rem 0;*/
        font-size: 1rem;
        padding-left: 0.3rem;
    }
    .reward_btn{
        font-size: 1rem;
        width: 96%;
        height: 2.5rem;
        line-height: 2.5rem;
        color:#fff;
        text-align: center;
        border-radius: 3px;
        background-color: #ec4e8a;
        position: fixed;
        left: 50%;
        bottom:0.8rem;
        z-index: 3;
        transform: translateX(-50%);
    }
</style>
